<template>
  <div>
    <ul>
      <li v-for="item in arr" :key="item.id">
        {{ item.num }}
        <button @click="del(item.id)">删除</button>
      </li>
      <button @click="run">生成</button>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [
        { id: 1, num: 1 },
        { id: 2, num: 3 },
        { id: 3, num: 5 }
      ]
    }
  },
  methods: {
    del (id) {
      this.arr = this.arr.filter(item => item.id !== id)
    },
    run () {
      let num = Math.floor(Math.random() * 21)
      this.arr.push({
        id: +new Date(),
        num: num
      })
    }
  }
}
</script>

<style></style>
